<template>
    <div class="right-main">
        <div class="content">
            <div class="title">
                <div class="title-label">页面设置</div>
            </div>
            <div class="title-item">
                <div class="title-item-text">
                    轮播图<span class="desc">（图片支持JPG、PNG、JPEG格式，大小10M以内，建议尺寸828px*464px）</span>
                </div>
            </div>
            <div class="banner-box">
                <div v-for="(item, index) in props.bannerList" :key="index" class="banner-item">
                    <div class="box-img">
                        <img class="box-img-item" :src="item.url" alt="" />
                        <span class="box-img-hover">
                            <img
                                class="del-img"
                                src="@/assets/channelConfig/marketingApplet/del.png"
                                @click="delItemImg(1, index)" />
                        </span>
                    </div>
                </div>
                <div class="banner-item">
                    <el-upload
                        v-if="props.bannerList.length < 5"
                        action=""
                        accept=".jpg,.JPG,.jpeg,.JPEG,.png,.PNG"
                        :show-file-list="false"
                        :disabled="props.bannerList.length >= 5"
                        :before-upload="onBeforeUpload"
                        :http-request="onHttpRequest">
                        <div class="upload-box">
                            <div>
                                <div class="icon">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </div>
                                <div class="text">({{ props.bannerList.length }}/5)</div>
                            </div>
                        </div>
                    </el-upload>
                </div>
            </div>
            <div class="title-item">
                <div class="title-item-text">
                    海报位<span class="desc">（图片支持JPG、PNG、JPEG格式，大小10M以内）</span>
                </div>
            </div>
            <div class="poster-box">
                <div v-for="(item, index) in props.posterList" :key="index" class="banner-item">
                    <div class="box-img">
                        <img class="box-img-item" :src="item.url" alt="" />
                        <span class="box-img-hover">
                            <img
                                class="del-img"
                                src="@/assets/channelConfig/marketingApplet/del.png"
                                @click="delItemImg(2, index)" />
                        </span>
                    </div>
                </div>
                <el-upload
                    v-if="props.posterList.length < 8"
                    action=""
                    accept=".jpg,.JPG,.jpeg,.JPEG,.png,.PNG"
                    :show-file-list="false"
                    :disabled="props.posterList.length >= 8"
                    :before-upload="onBeforeUpload"
                    :http-request="onHttpRequest2">
                    <div class="upload-box">
                        <div>
                            <div class="icon">
                                <el-icon>
                                    <Plus />
                                </el-icon>
                            </div>
                            <div class="text">({{ props.posterList.length }}/8)</div>
                        </div>
                    </div>
                </el-upload>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { uploadFile2 } from '@/api/common';

const emit = defineEmits(['delImgs', 'submit']);

const props = defineProps({
    bannerList: {
        type: Array,
        default: () => {
            return [];
        }
    },
    posterList: {
        type: Array,
        default: () => {
            return [];
        }
    }
});

const delItemImg = (type: any, index: any) => {
    emit('delImgs', type, index);
};

const onBeforeUpload = (file: any) => {
    const acceptImg = ['image/png', 'image/jpg', 'image/jpeg'];
    const is2M = file.size / 1024 / 1024 <= 10;
    if (!is2M) {
        ElMessage.warning(`上传的图片最大支持10M`);
        return false;
    }
    if (!acceptImg.includes(file.type)) {
        ElMessage.error('图片格式不正确！');
        return false;
    }
    return true;
};

const onHttpRequest = async ({ file }: any) => {
    const params = {
        file: file,
        fileName: file.name
    };
    const res: any = await uploadFile2(params);
    emit('submit', 1, res);
};

const onHttpRequest2 = async ({ file }: any) => {
    const params = {
        file: file,
        fileName: file.name
    };
    const res: any = await uploadFile2(params);
    emit('submit', 2, res);
};
</script>
<style lang="scss" scoped>
.right-main {
    width: 600px;
    background: #ffffff;
    .content {
        padding: 24px 24px;
        min-height: 660px;
        background: #ffffff;
        box-shadow: -2px 0px 14px 0px rgba(0, 0, 0, 0.1);
    }
    .title-item {
        display: flex;
        align-items: center;
        padding-top: 24px;
        &::before {
            display: inline-block;
            width: 4px;
            height: 14px;
            content: '';
            background: #ff6b00;
        }
        .title-item-text {
            margin-left: 6px;
            color: #33302d;
            font-size: 14px;
            .desc {
                padding-left: 8px;
                font-size: 12px;
                color: rgb(154, 154, 154);
            }
        }
    }
    .banner-box {
        padding-top: 16px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .poster-box {
        padding-top: 16px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .box-img {
        margin-right: 16px;
        margin-bottom: 16px;
        width: 160px;
        height: 160px;
        border-radius: 4px;
        position: relative;
        .box-img-item {
            width: 160px;
            height: 160px;
        }
        .box-img-hover {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(51, 48, 45, 0.5);
            border-radius: 4px;
            opacity: 0;
            .del-img {
                position: absolute;
                right: 10px;
                bottom: 10px;
                width: 20px;
                height: 20px;
                cursor: pointer;
            }
        }
        .box-img-hover:hover {
            opacity: 1;
        }
    }

    .upload-box {
        width: 160px;
        height: 160px;
        border-radius: 3px;
        border: 1px dashed #c0ccda;
        background: #fbfdff;
        color: #ff6b00;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon {
            margin-top: 30px;
            font-size: 22px;
            font-weight: 700;
        }
        .text {
            margin-top: 30px;
            color: #969696;
            line-height: 20px;
        }
    }
}
</style>
